<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 class="title" :class="{active:true,line:false}">你好</h2>
			<h2 class="title" :class="{active:isactive,line:isline}">还不错</h2>
			<h3 class="title" :class="[active,line]">hello</h3>
			<h3 class="title" :class="['bbb','ddd']">hello</h3>
			<h2 class="title" :class="getClass()">还不错哟</h2>
			<h2 class="title" :class="getclasss()">还不错哈哈</h2>
		</div>

		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
					active:'aaa',
					line:'bbb',
					isactive: true,
					isline: false,
					message: 'hello'
				},
				methods:{
					getClass : function(){
						return {active:false,line:true}
					},
					getclasss:function(){
						return [this.active,this.line]
					}
				}
			});
		</script>
	</body>
</html>
